<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Home</title>

</head>
<body>
	<p>聊天框</p>
	<form id="wiselyForm">
		<textarea rows="4" cols="60" name="text"></textarea>
		<input type="submit" />
	</form>
	<script th:src="@{js/jquery-1.8.2.min.js}"></script>
	<script th:src="@{js/stomp.min.js}"></script>
	<script th:src="@{js/sock.min.js}"></script>
	<script th:inline="javascript">
		$('#wiselyForm').submit(function(e) {
			e.preventDefault();
			var text = $("#wiselyForm").find('textarea[name="text"]').val();
			sendSpittle(text);
		});
		var sock = new SockJS('/endpointChat');
		var stomp = Stomp.over(sock);
		stomp.connect('guest', 'guest', function(frame) {
			stomp.subscribe("/user/queue/notifications", handleNotification);
		})
		function handleNotification(message) {
			$('#output').append("<b>Received:" + message.body + "</b><br/>");
		}
		function sendSpittle(text) {
			stomp.send("/chat", {}, text);
		}
		$('#stop').click(function() {
			sock.close()
		});
	</script>
	<div id="output"></div>
</body>

</html>